<template>
    <!-- 对话框表单 -->
    <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
        <div
            class="ba-operate-form"
            :class="'ba-' + baTable.form.operate + '-form'"
            :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
        >
        <div v-if="state.searchShow" class="search-wrapper" style="padding:50px 100px;text-align: center;">
            <el-input v-model="state.bjno" style="width:450px" placeholder="请输入报价单号" size="large">
                <template #append>
                    <el-button @click="searchBj">搜索</el-button>
                </template>
            </el-input>
        </div>
        <div style="text-align:right;margin-bottom: 20px;" v-if="baTable.form.operate !=='add'&&baTable.form.items">
            <el-dropdown @command="handlePrint" >
                <el-button type="primary" style="margin-left:10px">
                    打印单证<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item command="1">1.空箱运输委托书</el-dropdown-item>
                    <el-dropdown-item command="2">2.空箱进场通知（空罐调拨）</el-dropdown-item>
                    <el-dropdown-item command="3">3.提箱通知（出口 内贸）</el-dropdown-item>
                    <el-dropdown-item command="4">4.提箱通知（加热）</el-dropdown-item>
                    <el-dropdown-item command="5">5.提箱通知（内贸不清洗）</el-dropdown-item>
                    <el-dropdown-item command="6">6.提箱通知（内贸对罐有特别要求）</el-dropdown-item>
                    <el-dropdown-item command="7">7.（内贸）装卸货工作单</el-dropdown-item>
                    <el-dropdown-item command="8">8.出口或内贸（罐不重复使用）装货工作单</el-dropdown-item>
                    <el-dropdown-item command="9">9.内贸（罐重复使用）装货工作单</el-dropdown-item>
                    <el-dropdown-item command="10">10.内贸和进口货物（罐不重复使用）卸货工作单</el-dropdown-item>
                    <el-dropdown-item command="11">11.内贸货物(罐重复使用）卸货工作单.</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <el-form
        v-if="!baTable.form.loading&&!state.searchShow"
        ref="formRef"
        @keyup.enter="baTable.onSubmit(formRef)"
        :model="baTable.form.items"
        label-position="right"
        :label-width="'110px'"
        :rules="rules"
        class="form"
        :disabled="baTable.form.operate=='view'"
        >
            <div style="width:100%;display: flex;" >
                <FormItem :label="t('tz.BOOKINGNO')" style="width:25%" type="string" v-model="baTable.form.items!.BOOKINGNO" prop="BOOKINGNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.BOOKINGNO') }),disabled:true }" />
                <FormItem :label="t('费用审核人')" style="width:25%" 
                v-model="baTable.form.items!.CHECKER" 
                prop="CHECKER" 
                type="remoteSelect"
                :input-attr="{
                    pk: 'nickname',
                    field: 'nickname',
                    'remote-url':authAdmin+'index',
                    placeholder: t('Click Select'),
                }" 
            />
            </div>
            <FormItem :label="t('tz.SENDER')" type="string" v-model="baTable.form.items!.SENDER" prop="SENDER" :input-attr="{ placeholder: t('Please input field', { field: t('tz.SENDER') }),disabled:true }" />
            <FormItem 
            :label="t('tz.INTEGRATE')" 
            v-model="baTable.form.items!.INTEGRATE" 
            prop="INTEGRATE" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': codelib  + 'now?where=integrate'
            }"

            />
            <FormItem :label="t('tz.WAREHOUSENO')" type="string" v-model="baTable.form.items!.WAREHOUSENO" prop="WAREHOUSENO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.WAREHOUSENO') }) }" />
            <!-- 预装重量/容积 -->
            <FormItem :label="t('conloadplan.GWET')" type="number" prop="GWET" v-model.number="baTable.form.items!.GWET" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.GWET') }) }" />
            <!-- 箱号 -->
            <FormItem 
            :label="t('conloadplan.CNTRNO')" 
            v-model="state.extraItems.CNTRNO" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': '/admin/conloadplan/box?tzid='+baTable.form.items!.TZID,
                disabled:true
            }"
            />
            <!-- 箱型箱量 -->
            <FormItem 
            :label="'箱型箱量'" 
            v-model="state.extraItems.CONSIZE" 
            prop="CONSIZE" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': codelib  + 'now?where=consize',
                disabled:true
            }" 
            />
            <FormItem 
            :label="t('tz.PORTLOAD')" 
            v-model="baTable.form.items!.PORTLOAD" 
            prop="PORTLOAD" 
            type="remoteSelect"
            :input-attr="{
                pk: 'loadplace',
                field: 'loadplace',
                'remote-url': '/admin/tz/all?sql='+`select loadplace from x_bjline where bjno='${baTable.form.items!.BOOKINGNO}'`,
            }" 
            />
            <!-- 实装重量/容积 -->
            <FormItem class="mark-label" :label="t('conloadplan.TAREWT')" type="number" prop="TAREWT" v-model.number="state.extraItems.TAREWT" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.TAREWT') }),disabled:true }" />
            <FormItem :label="t('tz.PORTLOADAGENT')" type="string" v-model="baTable.form.items!.PORTLOADAGENT" prop="PORTLOADAGENT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PORTLOADAGENT') }),disabled:true }" />
            <!-- 提箱时间 -->
            <FormItem :label="t('conloadplan.FREESTORAGEFROM')" type="datetime" v-model="baTable.form.items!.FREESTORAGEFROM" prop="FREESTORAGEFROM" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.FREESTORAGEFROM') }),disabled:true }" />

            <FormItem 
            :label="t('tz.PORTDIS')"
            v-model="baTable.form.items!.PORTDIS" 
            prop="PORTDIS" 
            type="remoteSelect"
            :input-attr="{
                pk: 'displace',
                field: 'displace',
                'remote-url': '/admin/tz/all?sql='+`select displace from x_bjline where bjno='${baTable.form.items!.BOOKINGNO}'`,disabled:true
            }" 
                />
            <!-- 卸货重量/容积 -->
            <!-- 装货地 -->
            <!-- 预装货时间 -->
            <!-- 实装重量/容积 -->
            <FormItem class="mark-label" :label="t('conloadplan.TOTALWT')" type="number" prop="TOTALWT" v-model.number="state.extraItems.TOTALWT" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('conloadplan.TOTALWT') }),disabled:true }" />
            <!-- 装货地 -->
            <FormItem 
                :label="t('conloadplan.PACKERDESC')" 
                v-model="state.extraItems.PACKERDESC" 
                prop="PACKERDESC" 
                type="string"
                :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.PACKERDESC') }) ,disabled:true}"
                />
            <FormItem :label="t('conloadplan.PACKERDATE')" type="datetime" v-model="state.extraItems.PACKERDATE" prop="PACKERDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.PACKERDATE') }),disabled:true }" />
            
            <!-- 实际装货时间 -->
            <FormItem class="mark-label" :label="t('conloadplan.ZHDATE')" type="datetime" v-model="state.extraItems.ZHDATE" prop="ZHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.ZHDATE') }),disabled:true }" />
            <!-- 实际装货时间 -->
            <FormItem :label="t('tz.GOODSC')" type="string" v-model="baTable.form.items!.GOODSC" prop="GOODSC" :input-attr="{ placeholder: t('Please input field', { field: t('tz.GOODSC') }) ,disabled:true}" />
            <!-- 实际卸货时间 -->
            <FormItem 
                :label="t('conloadplan.SHPLACE')" 
                v-model="state.extraItems.SHPLACE" 
                prop="SHPLACE" 
                type="string"
                :input-attr="{ placeholder: t('Please input field', { field: t('conloadplan.SHPLACE') }) ,disabled:true}"
                />
            <FormItem :label="t('conloadplan.FREESTORAGETO')" type="datetime" v-model="state.extraItems.FREESTORAGETO" prop="FREESTORAGETO" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.FREESTORAGETO') }),disabled:true }" />
            <!-- 预计卸货时间 -->
            <!-- 实际卸货时间 -->
            <FormItem class="mark-label" :label="t('conloadplan.SHDATE')" type="datetime" v-model="state.extraItems.SHDATE" prop="SHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.SHDATE') }),disabled:true }" />
            <FormItem :label="t('tz.CONTRACTNO')" type="string" v-model="baTable.form.items!.CONTRACTNO" prop="CONTRACTNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CONTRACTNO') }) ,disabled:true}" />
            <FormItem :label="t('tz.NEXTVESSEL')" type="string" v-model="state.extraItems.HCPLACE" prop="NEXTVESSEL" :input-attr="{ placeholder: t('Please input field', { field: t('tz.NEXTVESSEL') }),disabled:true }" />
            <!-- 回场时间 -->
            <FormItem :label="t('conloadplan.HCDATE')" type="datetime" v-model="state.extraItems.HCDATE" prop="HCDATE" :input-attr="{ placeholder: t('Please select field', { field: t('conloadplan.HCDATE') }),disabled:true }" />
            <FormItem :label="t('tz.UNNO')" type="string" v-model="baTable.form.items!.UNNO" prop="UNNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.UNNO') }),disabled:true }" />
            <FormItem :label="t('tz.GOODSKIND')" type="string" v-model="baTable.form.items!.GOODSKIND" prop="GOODSKIND" :input-attr="{ placeholder: t('Please input field', { field: t('tz.GOODSKIND') }),disabled:true }" />

            <el-divider style="width:100%"/>
            <FormItem :label="t('tz.VESSEL')" type="string" v-model="baTable.form.items!.VESSEL" prop="VESSEL" :input-attr="{ placeholder: t('Please input field', { field: t('tz.VESSEL') }) }" />
            <FormItem :label="t('tz.ETD')" type="datetime" v-model="baTable.form.items!.ETD" prop="ETD" :input-attr="{ placeholder: t('Please select field', { field: t('tz.ETD') }) }" />
            <FormItem :label="t('tz.ETA')" type="datetime" v-model="baTable.form.items!.ETA" prop="ETA" :input-attr="{ placeholder: t('Please select field', { field: t('tz.ETA') }) }" />
            <FormItem 
            :label="t('tz.TRANSITEM')" 
            v-model="baTable.form.items!.TRANSITEM" 
            prop="TRANSITEM" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': codelib  + 'now?where=transitem'
            }"
            />
            <FormItem :label="'OBL/NO'" type="string" v-model="baTable.form.items!.YBH" prop="YBH" :input-attr="{ placeholder: t('Please input field', { field: t('tz.YBH') }) }" />
            <FormItem :label="t('tz.NEXTETD')" type="datetime" v-model="baTable.form.items!.NEXTETD" prop="NEXTETD" :input-attr="{ placeholder: t('Please select field', { field: t('tz.NEXTETD') }) }" />
            <FormItem :label="t('tz.NEXTETA')" type="datetime" v-model="baTable.form.items!.NEXTETA" prop="NEXTETA" :input-attr="{ placeholder: t('Please select field', { field: t('tz.NEXTETA') }) }" />
            <FormItem 
            :label="t('tz.FREIGHTITEM')" 
            v-model="baTable.form.items!.FREIGHTITEM" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': codelib  + 'now?where=freightitem'
            }" 
            />
            <FormItem 
            :label="t('tz.SHIPOWNER')" 
            v-model="baTable.form.items!.SHIPOWNER" 
            prop="SHIPOWNER" 
            type="remoteSelect"
            :input-attr="{
                pk: 'corp',
                field: 'corp',
                'remote-url': '/admin/tz/all?sql='+`select corp from customtype where code='CGS' and exists (select * from corplib where corplib.corp=customtype.corp and corplib.active='1')`,
            }"
            />
            <FormItem 
            :label="t('tz.PORTLOADDOCK')" 
            v-model="baTable.form.items!.PORTLOADDOCK" 
            prop="PORTLOADDOCK" 
            type="remoteSelect"
            :input-attr="{
                pk: 'port',
                field: 'port',
                'remote-url': '/admin/tz/all?sql='+`select port from  port`,
            }"
            />
            <FormItem 
            :label="t('tz.PORTVIA')" 
            v-model="baTable.form.items!.PORTVIA" 
            prop="PORTVIA" 
            type="remoteSelect"
            :input-attr="{
                pk: 'port',
                field: 'port',
                'remote-url': '/admin/tz/all?sql='+`select port from  port`,
            }"
            />
            <FormItem 
            :label="t('tz.PORTDISDOCK')" 
            v-model="baTable.form.items!.PORTDISDOCK" 
            prop="PORTDISDOCK" 
            type="remoteSelect"
            :input-attr="{
                pk: 'port',
                field: 'port',
                'remote-url': '/admin/tz/all?sql='+`select port from  port`,
            }"
            />
            <FormItem :label="t('tz.RECEIVER')" style="width:50%" type="textarea" v-model="baTable.form.items!.RECEIVER" prop="RECEIVER" :input-attr="{ placeholder: t('Please input field', { field: t('tz.RECEIVER') }) }" />
            <FormItem :label="t('tz.REMARK')" style="width:50%" type="textarea" v-model="baTable.form.items!.REMARK" prop="REMARK" :input-attr="{ placeholder: t('Please input field', { field: t('tz.REMARK') }) }" />

            <el-divider style="width:100%" />
            <FormItem :label="t('tz.PAYDOWN')" type="radio" v-model="baTable.form.items!.PAYDOWN" prop="PAYDOWN" :data="{ content: { 0:'否',1: '是' } }" :input-attr="{ placeholder: t('Please select field', { field: t('tz.PAYDOWN') }) }" />
            
            <el-form-item :label="t('tz.SALER')">
                <el-select v-model="baTable.form.items!.SALER" placeholder="请选择" @change="salerChange">
                    <el-option
                    v-for="item in state.salerList"
                    :key="item!.SALESNO"
                    :label="item!.SALERNAME"
                    :value="item!.SALESNO"
                    />
                </el-select>
            </el-form-item>
            <!-- <FormItem :label="t('tz.')" type="string" v-model="baTable.form.items!.DIRECTION" prop="DIRECTION" :input-attr="{ placeholder: t('Please input field', { field: t('tz.DIRECTION') }) }" /> -->
            <FormItem :label="t('tz.DIRECTION')" type="radio" v-model="baTable.form.items!.DIRECTION" prop="DIRECTION" :data="{ content: { 2: 'LBL' } }" :input-attr="{ placeholder: t('Please select field', { field: t('tz.DIRECTION') }) }" />
            <FormItem :label="t('tz.OP')" type="string" v-model="baTable.form.items!.OP" prop="OP" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OP') }),disabled:true }" />
            <FormItem 
            :label="t('tz.FLOW')" 
            v-model="baTable.form.items!.FLOW" 
            prop="FLOW" 
            type="remoteSelect"
            :input-attr="{
                pk: 'code',
                field: 'codename',
                'remote-url': codelib  + 'now?where=lblswlx'
            }" 
            />
            <FormItem :label="t('tz.SALERDEPT')" type="string" v-model="baTable.form.items!.SALERDEPT" prop="SALERDEPT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.SALERDEPT') }) }" />
            <!-- <FormItem :label="t('tz.')" type="string" v-model="baTable.form.items!.INOUT" prop="INOUT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.INOUT') }) }" /> -->
            <FormItem :label="t('tz.INOUT')" type="radio" v-model="baTable.form.items!.INOUT" prop="INOUT" :data="{ content: { 1: '内贸' } }" :input-attr="{ placeholder: t('Please select field', { field: t('tz.INOUT') }) }" />
            <FormItem :label="t('tz.OPTIME')" type="datetime" v-model="baTable.form.items!.OPTIME" prop="OPTIME" :input-attr="{ placeholder: t('Please select field', { field: t('tz.OPTIME') }),disabled:true }" />
            <FormItem :label="t('tz.OVERSTATUS')" type="radio" v-model="baTable.form.items!.OVERSTATUS" prop="OVERSTATUS" :data="{ content: { 0:'否',1: '是' } }" :input-attr="{ placeholder: t('Please select field', { field: t('tz.OVERSTATUS') }) }" />
            <FormItem :label="t('tz.OVERTIME')" type="datetime" v-model="baTable.form.items!.OVERTIME" prop="OVERTIME" :input-attr="{ placeholder: t('Please select field', { field: t('tz.OVERTIME') }) }" />
            <FormItem :label="t('tz.TZID')" type="string" v-model="baTable.form.items!.TZID" prop="TZID" :input-attr="{ placeholder: t('Please input field', { field: t('tz.TZID') }) ,disabled:true}" />
            <FormItem :label="t('tz.OPDEPT')" type="string" v-model="baTable.form.items!.OPDEPT" prop="OPDEPT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OPDEPT') }),disabled:true }" />
            <FormItem :label="t('tz.MANIFESTREMARK')" style="width:50%" type="textarea" v-model="baTable.form.items!.MANIFESTREMARK" prop="MANIFESTREMARK" :input-attr="{ placeholder: t('Please input field', { field: t('tz.MANIFESTREMARK') }) }" />
            <FormItem :label="t('tz.BIZDEPTREMARK')" style="width:50%" type="textarea" v-model="baTable.form.items!.BIZDEPTREMARK" prop="BIZDEPTREMARK" :input-attr="{ placeholder: t('Please input field', { field: t('tz.BIZDEPTREMARK') }) }" />
            
            
            <!-- <FormItem :label="t('tz.PORT')" type="string" v-model="baTable.form.items!.PORT" prop="PORT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PORT') }) }" />
            <FormItem :label="t('tz.GETCNTRAREA')" type="string" v-model="baTable.form.items!.GETCNTRAREA" prop="GETCNTRAREA" :input-attr="{ placeholder: t('Please input field', { field: t('tz.GETCNTRAREA') }) }" />
            <FormItem :label="t('tz.PUTCNTRAREA')" type="string" v-model="baTable.form.items!.PUTCNTRAREA" prop="PUTCNTRAREA" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PUTCNTRAREA') }) }" />
            <FormItem :label="t('tz.VOY')" type="string" v-model="baTable.form.items!.VOY" prop="VOY" :input-attr="{ placeholder: t('Please input field', { field: t('tz.VOY') }) }" />
            <FormItem :label="t('tz.CNTRCORP')" type="string" v-model="baTable.form.items!.CNTRCORP" prop="CNTRCORP" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CNTRCORP') }) }" />
            <FormItem :label="t('tz.CHANGEVESSEL')" type="string" v-model="baTable.form.items!.CHANGEVESSEL" prop="CHANGEVESSEL" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CHANGEVESSEL') }) }" />
            <FormItem :label="t('tz.BATCHABLE')" type="string" v-model="baTable.form.items!.BATCHABLE" prop="BATCHABLE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.BATCHABLE') }) }" />
            <FormItem :label="t('tz.ATCUSTOMS')" type="string" v-model="baTable.form.items!.ATCUSTOMS" prop="ATCUSTOMS" :input-attr="{ placeholder: t('Please input field', { field: t('tz.ATCUSTOMS') }) }" />
            <FormItem :label="t('tz.OTHERCONVEYANCE')" type="string" v-model="baTable.form.items!.OTHERCONVEYANCE" prop="OTHERCONVEYANCE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OTHERCONVEYANCE') }) }" />
            <FormItem :label="t('tz.NEXTVOY')" type="string" v-model="baTable.form.items!.NEXTVOY" prop="NEXTVOY" :input-attr="{ placeholder: t('Please input field', { field: t('tz.NEXTVOY') }) }" />
            <FormItem :label="t('tz.NEXTBLNO')" type="string" v-model="baTable.form.items!.NEXTBLNO" prop="NEXTBLNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.NEXTBLNO') }) }" />
            <FormItem :label="t('tz.NEXTPORTDIS')" type="string" v-model="baTable.form.items!.NEXTPORTDIS" prop="NEXTPORTDIS" :input-attr="{ placeholder: t('Please input field', { field: t('tz.NEXTPORTDIS') }) }" />
            <FormItem :label="t('tz.PORTDISAGENT')" type="string" v-model="baTable.form.items!.PORTDISAGENT" prop="PORTDISAGENT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PORTDISAGENT') }) }" />
            <FormItem :label="t('tz.LOADBILLTYPE')" type="string" v-model="baTable.form.items!.LOADBILLTYPE" prop="LOADBILLTYPE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.LOADBILLTYPE') }) }" />
            <FormItem :label="t('tz.CUSNO')" type="string" v-model="baTable.form.items!.CUSNO" prop="CUSNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CUSNO') }) }" />
            <FormItem :label="t('tz.SHIPPERSERVICENO')" type="string" v-model="baTable.form.items!.SHIPPERSERVICENO" prop="SHIPPERSERVICENO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.SHIPPERSERVICENO') }) }" />
            <FormItem :label="t('tz.PACKSUM')" type="number" prop="PACKSUM" v-model.number="baTable.form.items!.PACKSUM" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('tz.PACKSUM') }) }" />
            <FormItem :label="t('tz.PACKAGE')" type="string" v-model="baTable.form.items!.PACKAGE" prop="PACKAGE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PACKAGE') }) }" />
            <FormItem :label="t('tz.GWET')" type="number" prop="GWET" v-model.number="baTable.form.items!.GWET" :input-attr="{ step: '0.001', placeholder: t('Please input field', { field: t('tz.GWET') }) }" />
            <FormItem :label="t('tz.GOODSSIZE')" type="number" prop="GOODSSIZE" v-model.number="baTable.form.items!.GOODSSIZE" :input-attr="{ step: '0.0001', placeholder: t('Please input field', { field: t('tz.GOODSSIZE') }) }" />
            <FormItem :label="t('tz.ISDANGER')" type="string" v-model="baTable.form.items!.ISDANGER" prop="ISDANGER" :input-attr="{ placeholder: t('Please input field', { field: t('tz.ISDANGER') }) }" />
            <FormItem :label="t('tz.CONTAINERTYPE')" type="string" v-model="baTable.form.items!.CONTAINERTYPE" prop="CONTAINERTYPE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CONTAINERTYPE') }) }" />
            <FormItem :label="t('tz.MIXNO')" type="string" v-model="baTable.form.items!.MIXNO" prop="MIXNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.MIXNO') }) }" />
            <FormItem :label="t('tz.RELEASETYPE')" type="string" v-model="baTable.form.items!.RELEASETYPE" prop="RELEASETYPE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.RELEASETYPE') }) }" />
            <FormItem :label="t('tz.OCEANTRANSITEM')" type="string" v-model="baTable.form.items!.OCEANTRANSITEM" prop="OCEANTRANSITEM" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OCEANTRANSITEM') }) }" />
            <FormItem :label="t('tz.OTHERFREIGHTITEM')" type="string" v-model="baTable.form.items!.OTHERFREIGHTITEM" prop="OTHERFREIGHTITEM" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OTHERFREIGHTITEM') }) }" />
            <FormItem :label="t('tz.SETTLEMENT')" type="string" v-model="baTable.form.items!.SETTLEMENT" prop="SETTLEMENT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.SETTLEMENT') }) }" />
            <FormItem :label="t('tz.GOODSSUM')" type="number" prop="GOODSSUM" v-model.number="baTable.form.items!.GOODSSUM" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('tz.GOODSSUM') }) }" />
            <FormItem :label="t('tz.IPTYPE')" type="string" v-model="baTable.form.items!.IPTYPE" prop="IPTYPE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.IPTYPE') }) }" />
            <FormItem :label="t('tz.IPRATE')" type="number" prop="IPRATE" v-model.number="baTable.form.items!.IPRATE" :input-attr="{ step: '0.00001', placeholder: t('Please input field', { field: t('tz.IPRATE') }) }" />
            <FormItem :label="t('tz.STORAGEFROM')" type="datetime" v-model="baTable.form.items!.STORAGEFROM" prop="STORAGEFROM" :input-attr="{ placeholder: t('Please select field', { field: t('tz.STORAGEFROM') }) }" />
            <FormItem :label="t('tz.STORAGETO')" type="datetime" v-model="baTable.form.items!.STORAGETO" prop="STORAGETO" :input-attr="{ placeholder: t('Please select field', { field: t('tz.STORAGETO') }) }" />
            <FormItem :label="t('tz.CHECKED')" type="string" v-model="baTable.form.items!.CHECKED" prop="CHECKED" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CHECKED') }) }" />
            <FormItem :label="t('tz.BIZSTATUS')" type="radio" v-model="baTable.form.items!.BIZSTATUS" prop="BIZSTATUS" :data="{ content: { 1: t('tz.BIZSTATUS 1') } }" :input-attr="{ placeholder: t('Please select field', { field: t('tz.BIZSTATUS') }) }" />
            <FormItem :label="t('tz.CUSACCEPT')" type="string" v-model="baTable.form.items!.CUSACCEPT" prop="CUSACCEPT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CUSACCEPT') }) }" />
            <FormItem :label="t('tz.INKEEP')" type="string" v-model="baTable.form.items!.INKEEP" prop="INKEEP" :input-attr="{ placeholder: t('Please input field', { field: t('tz.INKEEP') }) }" />
            <FormItem :label="t('tz.ELECBOOKING')" type="string" v-model="baTable.form.items!.ELECBOOKING" prop="ELECBOOKING" :input-attr="{ placeholder: t('Please input field', { field: t('tz.ELECBOOKING') }) }" />
            <FormItem :label="t('tz.ELECORDERID')" type="string" v-model="baTable.form.items!.ELECORDERID" prop="ELECORDERID" :input-attr="{ placeholder: t('Please input field', { field: t('tz.ELECORDERID') }) }" />
            <FormItem :label="t('tz.OVEROP')" type="string" v-model="baTable.form.items!.OVEROP" prop="OVEROP" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OVEROP') }) }" />
            <FormItem :label="t('tz.HBL')" type="string" v-model="baTable.form.items!.HBL" prop="HBL" :input-attr="{ placeholder: t('Please input field', { field: t('tz.HBL') }) }" />
            <FormItem :label="t('tz.TZCIQNO')" type="string" v-model="baTable.form.items!.TZCIQNO" prop="TZCIQNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.TZCIQNO') }) }" />
            <FormItem :label="t('tz.RECEIVEOBLDATE')" type="datetime" v-model="baTable.form.items!.RECEIVEOBLDATE" prop="RECEIVEOBLDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.RECEIVEOBLDATE') }) }" />
            <FormItem :label="t('tz.DECLAREDATE')" type="datetime" v-model="baTable.form.items!.DECLAREDATE" prop="DECLAREDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.DECLAREDATE') }) }" />
            <FormItem :label="t('tz.PASSDATE')" type="datetime" v-model="baTable.form.items!.PASSDATE" prop="PASSDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.PASSDATE') }) }" />
            <FormItem :label="t('tz.LOADDATE')" type="datetime" v-model="baTable.form.items!.LOADDATE" prop="LOADDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.LOADDATE') }) }" />
            <FormItem :label="t('tz.CHANGEBLDATE')" type="datetime" v-model="baTable.form.items!.CHANGEBLDATE" prop="CHANGEBLDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.CHANGEBLDATE') }) }" />
            <FormItem :label="t('tz.CHANGEREQUIRED')" type="string" v-model="baTable.form.items!.CHANGEREQUIRED" prop="CHANGEREQUIRED" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CHANGEREQUIRED') }) }" />
            <FormItem :label="t('tz.CIQNAME')" type="string" v-model="baTable.form.items!.CIQNAME" prop="CIQNAME" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CIQNAME') }) }" />
            <FormItem :label="t('tz.FCLCONTAINERNO')" type="string" v-model="baTable.form.items!.FCLCONTAINERNO" prop="FCLCONTAINERNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FCLCONTAINERNO') }) }" />
            <FormItem :label="t('tz.CIQCHECK')" type="string" v-model="baTable.form.items!.CIQCHECK" prop="CIQCHECK" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CIQCHECK') }) }" />
            <FormItem :label="t('tz.CLEAN')" type="string" v-model="baTable.form.items!.CLEAN" prop="CLEAN" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CLEAN') }) }" />
            <FormItem :label="t('tz.PROPAGATION')" type="string" v-model="baTable.form.items!.PROPAGATION" prop="PROPAGATION" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PROPAGATION') }) }" />
            <FormItem :label="t('tz.APPLYCORP')" type="string" v-model="baTable.form.items!.APPLYCORP" prop="APPLYCORP" :input-attr="{ placeholder: t('Please input field', { field: t('tz.APPLYCORP') }) }" />
            <FormItem :label="t('tz.PHONE')" type="string" v-model="baTable.form.items!.PHONE" prop="PHONE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.PHONE') }) }" />
            <FormItem :label="t('tz.FINALDEST')" type="string" v-model="baTable.form.items!.FINALDEST" prop="FINALDEST" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FINALDEST') }) }" />
            <FormItem :label="t('tz.CARGODIRECTION')" type="string" v-model="baTable.form.items!.CARGODIRECTION" prop="CARGODIRECTION" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CARGODIRECTION') }) }" />
            <FormItem :label="t('tz.OTHERBL')" type="string" v-model="baTable.form.items!.OTHERBL" prop="OTHERBL" :input-attr="{ placeholder: t('Please input field', { field: t('tz.OTHERBL') }) }" />
            <FormItem :label="t('tz.INCOTERM')" type="string" v-model="baTable.form.items!.INCOTERM" prop="INCOTERM" :input-attr="{ placeholder: t('Please input field', { field: t('tz.INCOTERM') }) }" />
            <FormItem :label="t('tz.INCOPLACE')" type="string" v-model="baTable.form.items!.INCOPLACE" prop="INCOPLACE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.INCOPLACE') }) }" />
            <FormItem :label="t('tz.DECLMODE')" type="string" v-model="baTable.form.items!.DECLMODE" prop="DECLMODE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.DECLMODE') }) }" />
            <FormItem :label="t('tz.MARK')" type="string" v-model="baTable.form.items!.MARK" prop="MARK" :input-attr="{ placeholder: t('Please input field', { field: t('tz.MARK') }) }" />
            <FormItem :label="t('tz.FLAG1')" type="string" v-model="baTable.form.items!.FLAG1" prop="FLAG1" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG1') }) }" />
            <FormItem :label="t('tz.FLAG2')" type="string" v-model="baTable.form.items!.FLAG2" prop="FLAG2" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG2') }) }" />
            <FormItem :label="t('tz.FLAG3')" type="string" v-model="baTable.form.items!.FLAG3" prop="FLAG3" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG3') }) }" />
            <FormItem :label="t('tz.FLAG4')" type="string" v-model="baTable.form.items!.FLAG4" prop="FLAG4" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG4') }) }" />
            <FormItem :label="t('tz.FLAG5')" type="string" v-model="baTable.form.items!.FLAG5" prop="FLAG5" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG5') }) }" />
            <FormItem :label="t('tz.FLAG6')" type="string" v-model="baTable.form.items!.FLAG6" prop="FLAG6" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG6') }) }" />
            <FormItem :label="t('tz.FLAG7')" type="string" v-model="baTable.form.items!.FLAG7" prop="FLAG7" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG7') }) }" />
            <FormItem :label="t('tz.FLAG8')" type="string" v-model="baTable.form.items!.FLAG8" prop="FLAG8" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG8') }) }" />
            <FormItem :label="t('tz.FLAG9')" type="string" v-model="baTable.form.items!.FLAG9" prop="FLAG9" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG9') }) }" />
            <FormItem :label="t('tz.FLAG10')" type="string" v-model="baTable.form.items!.FLAG10" prop="FLAG10" :input-attr="{ placeholder: t('Please input field', { field: t('tz.FLAG10') }) }" />
            <FormItem :label="t('tz.ETA')" type="datetime" v-model="baTable.form.items!.ETA" prop="ETA" :input-attr="{ placeholder: t('Please select field', { field: t('tz.ETA') }) }" />
            <FormItem :label="t('tz.METERAGE')" type="number" prop="METERAGE" v-model.number="baTable.form.items!.METERAGE" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('tz.METERAGE') }) }" />
            <FormItem :label="t('tz.AIRPLACE')" type="string" v-model="baTable.form.items!.AIRPLACE" prop="AIRPLACE" :input-attr="{ placeholder: t('Please input field', { field: t('tz.AIRPLACE') }) }" />
            <FormItem :label="t('tz.AGENT')" type="string" v-model="baTable.form.items!.AGENT" prop="AGENT" :input-attr="{ placeholder: t('Please input field', { field: t('tz.AGENT') }) }" />
            <FormItem :label="t('tz.YS')" type="number" prop="YS" v-model.number="baTable.form.items!.YS" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('tz.YS') }) }" />
            <FormItem :label="t('tz.YF')" type="number" prop="YF" v-model.number="baTable.form.items!.YF" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('tz.YF') }) }" />
            <FormItem :label="t('tz.YJT')" type="number" prop="YJT" v-model.number="baTable.form.items!.YJT" :input-attr="{ step: '0.01', placeholder: t('Please input field', { field: t('tz.YJT') }) }" />
            <FormItem :label="t('tz.TXDATE')" type="datetime" v-model="baTable.form.items!.TXDATE" prop="TXDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.TXDATE') }) }" />
            <FormItem :label="t('tz.ZHDATE')" type="datetime" v-model="baTable.form.items!.ZHDATE" prop="ZHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.ZHDATE') }) }" />
            <FormItem :label="t('tz.SHDATE')" type="datetime" v-model="baTable.form.items!.SHDATE" prop="SHDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.SHDATE') }) }" />
            <FormItem :label="t('tz.DDDATE')" type="datetime" v-model="baTable.form.items!.DDDATE" prop="DDDATE" :input-attr="{ placeholder: t('Please select field', { field: t('tz.DDDATE') }) }" />
            <FormItem :label="t('tz.JOBNO')" type="string" v-model="baTable.form.items!.JOBNO" prop="JOBNO" :input-attr="{ placeholder: t('Please input field', { field: t('tz.JOBNO') }) }" />
            <FormItem :label="t('tz.CC')" type="string" v-model="baTable.form.items!.CC" prop="CC" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CC') }) }" />
            <FormItem :label="t('tz.REMARK1')" type="string" v-model="baTable.form.items!.REMARK1" prop="REMARK1" :input-attr="{ placeholder: t('Please input field', { field: t('tz.REMARK1') }) }" />
            <FormItem :label="t('tz.REMARK2')" type="string" v-model="baTable.form.items!.REMARK2" prop="REMARK2" :input-attr="{ placeholder: t('Please input field', { field: t('tz.REMARK2') }) }" />
            <FormItem :label="t('tz.CHECKER')" type="string" v-model="baTable.form.items!.CHECKER" prop="CHECKER" :input-attr="{ placeholder: t('Please input field', { field: t('tz.CHECKER') }) }" /> -->
            </el-form>
        </div>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { reactive, ref, inject, onMounted, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import createAxios from '/@/utils/axios'
import { codelib ,authAdmin} from '/@/api/controllerUrls'
import { ArrowDown } from '@element-plus/icons-vue'

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    INOUT: [buildValidatorData({name: 'required', title: t('tz.INOUT')})],
    DIRECTION: [buildValidatorData({name: 'required', title: t('tz.DIRECTION')})],
    OVERSTATUS: [buildValidatorData({name: 'required', title: t('tz.OVERSTATUS')})],
    ETD: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.ETD') })})],
    NEXTETD: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.NEXTETD') })})],
    NEXTETA: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.NEXTETA') })})],
    STORAGEFROM: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.STORAGEFROM') })})],
    STORAGETO: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.STORAGETO') })})],
    OPTIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.OPTIME') })})],
    OVERTIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.OVERTIME') })})],
    RECEIVEOBLDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.RECEIVEOBLDATE') })})],
    DECLAREDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.DECLAREDATE') })})],
    PASSDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.PASSDATE') })})],
    LOADDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.LOADDATE') })})],
    CHANGEBLDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.CHANGEBLDATE') })})],
    ETA: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.ETA') })})],
    TXDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.TXDATE') })})],
    ZHDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.ZHDATE') })})],
    SHDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.SHDATE') })})],
    DDDATE: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('tz.DDDATE') })})],
})

const state  = reactive({
    bjno:'',
    searchShow:false,
    salerList:[],
    extraItems:{}
})


onMounted(()=>{
    getSaler()
})

watchEffect(()=>{
    if(baTable.form.operate == 'add'){
        state.searchShow = true
        baTable.form.items!.DIRECTION = 2
        baTable.form.items!.INOUT = 1
    }else{
        state.searchShow = false
        if(baTable.form.items!.col){
            state.extraItems = baTable.form.items!.col[0]||{}
        }
    }
})

const doSave = (callback:any) => {
    baTable.onSubmit(formRef.value,callback)
}
defineExpose({
    doSave
})


const getSaler = ()=>{
    createAxios({
      url:'/admin/tz/sale',
        method:'get'
    }).then((res:any)=>{
        state.salerList = res.data
    })
}

const searchBj = ()=>{
    console.log(state.bjno)
    if(!state.bjno) return
    createAxios({
      url:'/admin/tz/bjno?bjno='+state.bjno,
        method:'get'
    }).then((res:any)=>{
        let item = res.data[0]||{}
        baTable.form.items!.BOOKINGNO = state.bjno
        baTable.form.items!.GOODSC = item.goods
        baTable.form.items!.CONTRACTNO = item.goodsid
        baTable.form.items!.UNNO = item.unno
        baTable.form.items!.GOODSKIND = item.goodskind
        baTable.form.items!.SENDER = item.corp
        state.searchShow = false        
    })
}

const salerChange = (val:string)=>{
    let item:any = state.salerList.find((it:any)=>it!.SALESNO == val)
    baTable.form.items!.SALERDEPT = item.SALESDEPT
}



const handlePrint = (type:string)=>{
    window.open(`/#/admin/print?type=${type}&tzid=${baTable.form.items!.TZID}`)
}


</script>

<style scoped lang="scss">
.form{
    display: flex;
    flex-wrap: wrap;
    >div{
        width: 25%;
    }
    :deep(.el-form-item__label){
        line-height: 16px;
        align-items: center;
        text-align: right;
    }
    :deep(.mark-label) label{
        color: red;
    }
}
</style>
